<template>
  <div>
    <h2>字符串写法</h2>
    <div class="basic" :class="str">hello 尚硅谷111</div>
    <button @click="onchangData('happy')">开心</button>
    <button @click="onchangData('sad')">悲伤</button>
    <button @click="onchangData('normal')">一般</button>
    <hr>
    <h2>Class的对象写法</h2>
    <div class="basic" :class="obj">hello 尚硅谷222</div>
    <button @click="obj.atguigu1 = !obj.atguigu1">确定/取消 atguigu1</button>
    <button @click="obj.atguigu2 = !obj.atguigu2">确定/取消 atguigu2</button>
    <button @click="obj.atguigu3 = !obj.atguigu3">确定/取消 atguigu3</button>
    <hr>
    <h2>Class的数组写法</h2>
    <div class="basic" :class="arr">hello 尚硅谷333</div>
    <input type="text" placeholder="请输入样式的类名" v-model="ky" @keyup.enter="getinp">
  </div>
</template>

<script>
export default {
  name: 'Class',
  data() {
    return {
      // 字符串形式class样式的绑定
      str: '',
      // 对象形式class样式的绑定
      obj: {
        atguigu1: false,
        atguigu2: false,
        atguigu3: false,
      },
      // 数组形式class的绑定,
      ky: '',
      arr: []
    }
  },
  methods: {
    onchangData(emote) {
      this.str = emote
    },
    getinp() {
      this.arr.push(this.ky)
    }
  },

}
</script>







<style scoped>
.basic {
  width: 400px;
  height: 100px;
  border: 1px solid black;
}

/* 三种心情，三选一 */
.happy {
  border: 4px solid red;
  ;
  background-color: rgba(255, 255, 0, 0.644);
  background: linear-gradient(30deg, yellow, pink, orange, yellow);
}

.sad {
  border: 4px dashed black;
  background-color: gray;
}

.normal {
  border: 4px solid deepskyblue;
  background-color: skyblue;
}

/* 三个样式，随意选择，可以同时存在 */
.atguigu1 {
  background-color: rgb(15, 137, 224);
}

.atguigu2 {
  text-shadow: 2px 2px 10px red;
}

.atguigu3 {
  border-radius: 20px;
}

/* input {
  font-size: 18px;
  outline: none;
  color: cadetblue;
  margin-top: 5px;
} */
</style>